<template>
  <k-view class="head-liner">
    <k-view class="head-liner__line__left"></k-view>
    <k-view class="head-liner__text">
      {{ msg }}
    </k-view>
    <k-view class="head-liner__line__right"></k-view>
  </k-view>
</template>

<script>
export default {
  props: {
    msg: String,
  },
};
</script>

<style lang="less" scoped>
.head-liner {
  height: 50px;
  width: 100%;
  font-size: 36px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top:20px;
  &__line {
    &__left {
      width: 78px;
      height: 4px;
      background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #e82d2d 100%);
    }
    &__right {
      width: 78px;
      height: 4px;
      background-image: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #e82d2d 100%);
    }
  }
  &__text {
    color: #262626;
    font-weight: 500;
    margin: 0 2px 0 12px;
  }
}
[theme-mode='black'] {
  .head-liner {
  
  &__text {
    color: rgba(255,255,255,0.84);
    font-weight: 500;
  }
}
}
</style>
